{% load static %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="{% static 'assets/css/bootstrap.css' %}"/>
    <style type="text/css">
        body {
            background:#EFF3FC ;
        }

        html,
        body,
        .content,
        #dictoryClassify {
            height: 100%;
        }

        ul,
        li {
            list-style: none;
            padding: 0px;
        }

        .content {
            margin-left: 0;
            margin-top: 0;
            width: auto;
            padding: 0px 20px 0 20px;
        }

        #myTabContent {
            height: 86%;
        }

        #myTab {
            border-top: 1px solid #EFF3FC;
            border-bottom: 2px solid #EFF3FC;
        }

        #dictoryClassify > div {
            overflow: hidden;
            height: 97%;
            margin-top: 1%;
        }

        #dictoryClassify .dictory {
            width: 14%;
            float: left;
            border: 1px solid #EFF3FC;
            height: 99%;
            background: #ffffff;
            border-radius: 10px;
        }

        #dictoryClassify .dictory > div {
            height: 40px;
            text-align: center;
            border-bottom: 1px solid #EFF3FC;
            line-height: 40px;
        }

        #dictoryClassify .dictory ul li {
            height: 30px;
            line-height: 30px;
            text-align: center;
        }

        #dictoryClassify .showDictory {
            width: 84%;
            border: 1px solid #EFF3FC;
            float: right;
            height: 99%;
            background: #ffffff;
            border-radius: 10px;
        }

        #dictoryClassify .showDictory .operationBtn {
            border-bottom: 1px solid #EFF3FC;
            padding: 14px;
        }

        #dictoryClassify .showDictory .showDetail {
            height: 80%;
            width: 95%;
            /*background: red;*/
            margin: 0 auto;
            margin-top: 3%;
        }

        #dictoryClassify .showDictory .showDetail div {
            height: 60px;
            background: #EFF3FC;
            line-height: 60px;
        }

        #dictoryClassify .showDictory .showDetail div span {
            margin-right: 30px;
        }

        #dictoryClassify .showDictory .showDetail table {
            width: 90%;
            margin: 0 auto;
            margin-top: 20px;
            text-align: center;
        }

        #dictoryClassify .showDictory .showDetail table tr:first-child {
            background: #EFF3FC;
        }

        #dictoryClassify .showDictory .showDetail table tr th {
            text-align: center;
        }

        #dictoryClassify .showDictory .showDetail table tr {
            height: 30px;
        }

        #chanceDetail li:first-child input {
            margin-right: 10px;
        }

        #chanceDetail li input {
            margin-right: 14px;
        }
    </style>
</head>
<body>
<div class="content">
    <div style="padding: 10px 0;">系统管理>数据字典</div>
    <ul id="myTab" class="nav nav-pills">
        <li class="active">
            <a href="#dictoryClassify" data-toggle="tab">字典分类</a>
        </li>
        <li>
            <a href="#dictoryDetail" data-toggle="tab">字典明细</a>
        </li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="dictoryClassify">
            <div>
                <div class="dictory">
                    <div>字典树</div>
                    <ul>
                        {% for object in object_list.types %}
                            {% if object_list.pk == object.id %}
                                <li style="background: aqua"><a
                                        href="/dictionary/type/{{ object.id }}/list">{{ object.name }}</a></li>
                            {% else %}
                                <li><a href="/dictionary/type/{{ object.id }}/list">{{ object.name }}</a></li>
                            {% endif %}
                        {% endfor %}
                    </ul>
                </div>
                <div class="showDictory">
                    <div class="operationBtn row" style="margin: 0px;">
                        <div class="pull-right">
                            <button class="btn btn-primary" data-toggle="modal" data-target="#createModal">添加</button>
                            <button class="btn btn-primary" data-toggle="modal" data-target="#editModal">编辑</button>
                            <button class="btn btn-primary">删除</button>
                        </div>
                    </div>
                    <div class="showDetail">
                        {% if object_list.pk > 0 %}
                            <div>
                                {% with object_list.select as select %}
                                    <span>字典标题：{{ select.name }}</span>
                                    {% if select.status == 0 %}
                                        <span>状态：暂停</span>
                                    {% else %}
                                        <span>状态：启用</span>
                                    {% endif %}
                                    <span>字典编码：{{ select.code }}</span>
                                {% endwith %}
                            </div>
                            <table border="1">
                                <tr>
                                    <th width="20%">选项标题</th>
                                    <th width="25%">值</th>
                                    <th width="25%">编码</th>
                                    <th width="25%">排序</th>
                                </tr>

                                {% for item in object_list.items %}
                                    <tr>
                                        <td>{{ item.name }}</td>
                                        <td>{{ item.value }}</td>
                                        <td>{{ item.code }}</td>
                                        <td>{{ item.sort }}</td>
                                    </tr>
                                {% endfor %}

                            </table>
                        {% endif %}
                    </div>
                </div>

            </div>

        </div>
        <div class="tab-pane fade" id="dictoryDetail">
            <div>76876867</div>
        </div>
    </div>
</div>
<div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="background-color: #EFF3FC;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    添加数据字典
                </h4>
            </div>
            <div class="modal-body">
                <form action="" method="post" class="form-horizontal">
                    <div class="form-group row">
                        <label class="col-md-3 control-label">字典标题：</label>
                        <div class="col-md-6"><input type="text" id="create-name" maxlength="10"
                                                     placeholder="输入不多于10个文字" class="form-control"/></div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3 control-label">字典编码：</label>
                        <div class="col-md-6"><input type="text" id="create-code" maxlength="20"
                                                     placeholder="输入不多于20个字母或数字，用于系统调用" class="form-control"/></div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-3 control-label">字典状态：</label>
                        <div class="col-md-6" id="dictoryStatus">
                            <label><input name="create-status" type="radio" value="1"  checked/>启用 </label>
                            <label><input name="create-status" type="radio" value="0"/>停用 </label>
                        </div>
                    </div>
                    <div class="form-group">
                       <div class="col-md-4" style=" text-align: right;margin-left: 8px;">添加字典选项内容：</div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-12">
                            <ul id="chanceDetail">
                                <li style="margin-left: 40px;">
                                    <input class='item_name ' style="width: 87px" type="text" placeholder="选项标题"/>
                                    <input class='item_value' style="width: 87px" type="text" placeholder="选项值"/>
                                    <input class='item_code ' style="width: 87px" type="text" placeholder="编码"/>
                                    <input class='item_sort' style="width: 87px" type="text" placeholder="排序 "/>
                                    <input type="button" name="" value="+" class="btn btn-primary " id="add"/>
                                </li>
                            </ul>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="create_dict()">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!--编辑的模态框 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="background-color: #EFF3FC;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    编辑数据字典
                </h4>
            </div>
            <div class="modal-body">
                {% with object_list.select as select %}
                    <form action="" method="post">
                        <div class="form-group row">
                            <label class="col-md-3 control-label">字典标题：</label>
                            <div class="col-md-6"><input type="text" id="edit-name" maxlength="10"
                                                         value="{{ select.name }}"
                                                         placeholder="输入不多于10个文字"/></div>
                        </div>
                        <div class="form-group row">
                            <label class="col-md-3 control-label">字典编码：</label>
                            <div class="col-md-6"><input type="text" id="edit-code" maxlength="20"
                                                         value="{{ select.code }}"
                                                         placeholder="输入不多于20个字母或数字，用于系统调用"/></div>
                        </div>
                        <div class="form-group row">
                            <label class="col-md-3 control-label">字典状态：</label>
                            <div class="col-md-6" id="dictoryStatus">
                                {% if select.status == 1 %}
                                    <label><input name="edit-status" type="radio" value="1" checked/>启用 </label>
                                    <label><input name="edit-status" type="radio" value="0"/>停用 </label>
                                {% else %}
                                    <label><input name="edit-status" type="radio" value="1"/>启用 </label>
                                    <label><input name="edit-status" type="radio" value="0" checked/>停用 </label>
                                {% endif %}
                            </div>
                        </div>
                        <div class="form-group ">
                            <labelcontrol-label
                            ">编辑字典选项内容：</label>
                            <div>
                                <ul id="chanceDetailEdit">
                                    {% if object_list.items|length == 0 %}
                                        <li>
                                            <input class='item_name' style="width: 87px" type="text"
                                                   placeholder="选项标题"/>
                                            <input class='item_value' style="width: 87px" type="text"
                                                   placeholder="选项值"/>
                                            <input class='item_code' style="width: 87px" type="text" placeholder="编码"/>
                                            <input class='item_sort' style="width: 87px" type="text" placeholder="排序 "/>
                                            <input type="button" name="" value="+" class="btn btn-primary"
                                                   id="edit-add"/>
                                        </li>
                                    {% endif %}
                                    {% for item in object_list.items %}
                                        <li>
                                            <input class='item_name' style="width: 87px" type="text" placeholder="选项标题"
                                                   value="{{ item.name }}"/>
                                            <input class='item_value' style="width: 87px" type="text" placeholder="选项值"
                                                   value="{{ item.value }}"/>
                                            <input class='item_code' style="width: 87px" type="text" placeholder="编码"
                                                   value="{{ item.code }}"/>
                                            <input class='item_sort' style="width: 87px" type="text" placeholder="排序 "
                                                   value="{{ item.sort }}"/>
                                            {% if forloop.counter != 1 %}
                                                <input type="button" name="" value='-' class='btn btn-default'
                                                       id="edit-delete"/>
                                            {% else %}
                                                <input type="button" name="" value="+" class="btn btn-primary"
                                                       id="edit-add"/>
                                            {% endif %}
                                        </li>
                                    {% endfor %}

                                </ul>
                            </div>
                        </div>
                    </form>
                {% endwith %}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="edit_dict()">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<!-- 仅仅为了显示代码使用，不要在项目中引入使用-->
<script src="{% static 'assets/js/prettify.js' %}"></script>
<script src="{% static 'assets/js/jquery.min.js' %}"></script>
<script src="{% static 'assets/js/bootstrap/bootstrap.min.js' %}"></script>
<script type="text/javascript">
    var type_id = null;
    {% if object_list.pk > 0 %}
        type_id = {{ object_list.pk }};
    {% endif %}
    function showDetail() {
        $.ajax({
            url: "/login/authenticate?name=",
            type: "POST",
            data: {},
            dataType: "json",
            success: function (data) {

            },
            error: function (err) {
                console.log(err.statusText);
                console.log('异常');
            }
        });
    }

    function create_dict() {
        var status = $('input[name="create-status"]').val();
        var name = $('#create-name').val();
        var code = $('#create-code').val();
        var type = {"status": status, "name": name, "code": code};
        // 获得items
        var items = [];
        $('#chanceDetail').find('li').each(function () {
            var item = {};
            console.log($(this));
            item.name = $(this).find('.item_name').val();
            item.code = $(this).find('.item_code').val();
            item.value = $(this).find('.item_value').val();
            item.sort = $(this).find('.item_sort').val();
            items.push(item);
        });

        data = {"items": items, "type": type}
        console.log(data);
        $.ajax({
            url: "/api/dictionary/create",
            type: "POST",
            data: JSON.stringify(data),
            dataType: "json",
            success: function (data) {
                $('.modal').show('hidden');
            },
            error: function (err) {
                console.log(err.statusText);
                console.log('异常');
            }
        })
    }

    function edit_dict() {
        var status = $('input[name="edit-status"]').val();
        var name = $('#edit-name').val();
        var code = $('#edit-code').val();
        var type = {"status": status, "name": name, "code": code, "id": type_id};
        // 获得items
        var items = [];
        $('#chanceDetailEdit').find('li').each(function () {
            var item = {};
            console.log($(this));
            item.name = $(this).find('.item_name').val();
            item.code = $(this).find('.item_code').val();
            item.value = $(this).find('.item_value').val();
            item.sort = $(this).find('.item_sort').val();
            items.push(item);
        });

        data = {"items": items, "type": type}
        console.log(data);
        $.ajax({
            url: "/api/dictionary/edit",
            type: "POST",
            data: JSON.stringify(data),
            dataType: "json",
            success: function (data) {
                $('.modal').show('hidden');
            },
            error: function (err) {
                console.log(err.statusText);
                console.log('异常');
            }
        })
    }

    //  $("#add").click(function(){
    //
    //  })
    //添加字典确认按钮事件
    $("#addDictory").click(function () {
        var focusStatus = $('#dictoryStatus input[name="status"]:checked ').val();

    })

    function delete1(i) {
        $('#' + i).remove();
    }

    var i = 0;
    $("#add").click(function () {
        i++;
        var id = "addList" + i;
        var content = "<li id='" + id + "'  style='margin-left: 40px;' ><input type='text' class='item_name' style='width:87px' placeholder='选项标题' /><input type='text' class='item_value' style='width:87px' placeholder='选项值' /><input type='text' class='item_code' style='width:87px' placeholder='编码' /><input type='text' class='item_sort' style='width:87px' placeholder='排序' /><input type='button' value='-' class='btn btn-default'  id='cc'+i onclick='delete1(\"" + id + "\")'/></li>'";
        console.log(content);
        $(content).appendTo($('#chanceDetail'));
    })

    $("#edit-add").click(function () {
        i++;
        var id = "addList" + i;
        var content = "<li id='" + id + "'><input type='text' class='item_name' style='width:87px' placeholder='选项标题' /><input type='text' class='item_value' style='width:87px' placeholder='选项值' /><input type='text' class='item_code' style='width:87px' placeholder='编码' /><input type='text' class='item_sort' style='width:87px' placeholder='排序' /><input type='button' value='-' class='btn btn-default'  id='cc'+i onclick='delete1(\"" + id + "\")'/></li>'";
        console.log(content);
        $(content).appendTo($('#chanceDetailEdit'));
    })
</script>
<body>
</html>